﻿@model Icoders.MarketTracker.Core.MasterData.FrsAssign

@{
    ViewBag.Title = "Assign";
}

<h2>Assign</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<h3>@ViewBag.UserName</h3>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>FRS Manage</legend>
        @Html.HiddenFor(model => model.UserId)
         <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Client")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.ClientId, new SelectList(ViewBag.ClientList, "value", "text"), "----------Select Client-----------", new { @id = "Client" })
            @Html.ValidationMessageFor(model => model.ClientId)
        </div>
        <div class="editor-label">        
            @Html.LabelFor(model=>model.Target)
        </div>
        <div class="editor-field">
         @Html.EditorFor(model => model.Target)
            @Html.ValidationMessageFor(model => model.Target)
           
        </div>


        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Country")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.Country, new SelectList(ViewBag.CountryList, "value", "text"), "----------Select Country-----------", new { @id = "Country" })
            @Html.ValidationMessageFor(model => model.Country)
        </div>

        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("City")
        </div>
        <div class="editor-field">
             @Html.DropDownListFor(model => model.City, new SelectList(ViewBag.CityList, "value", "text"), "----------Select City-----------",new { @id="City"})
            @Html.ValidationMessageFor(model => model.City)
        </div>

        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Area")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.AreaId, new SelectList(ViewBag.AreaList, "value", "text"), "----------Select Area-----------",new { @id="Area"})
            @Html.ValidationMessageFor(model => model.AreaId)
        </div>
        <br />
          <fieldset>
        <legend>Assign Daily Working Zone</legend>
        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Monday Zone")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.MondayZone, new SelectList(ViewBag.ZoneList, "value", "text"), "----------Select Zone-----------", new { @id = "zonemon" })
            @Html.ValidationMessageFor(model => model.MondayZone)
        </div>

        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Tuesday Zone")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.TuesdayZone, new SelectList(ViewBag.ZoneList, "value", "text"), "----------Select Zone-----------", new { @id = "zonetue" })
            @Html.ValidationMessageFor(model => model.TuesdayZone)
        </div>

        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Wednesday Zone")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.WednesdayZone, new SelectList(ViewBag.ZoneList, "value", "text"), "----------Select Zone-----------", new { @id = "zonewed" })
            @Html.ValidationMessageFor(model => model.WednesdayZone)
        </div>

        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Thursday Zone")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.ThursdayZone, new SelectList(ViewBag.ZoneList, "value", "text"), "----------Select Zone-----------", new { @id = "zonethus" })
            @Html.ValidationMessageFor(model => model.ThursdayZone)
        </div>

        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Friday Zone")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.FridayZone, new SelectList(ViewBag.ZoneList, "value", "text"), "----------Select Zone-----------", new { @id = "zonefri" })
            @Html.ValidationMessageFor(model => model.FridayZone)
        </div>

        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Saturday Zone")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.SaturdayZone, new SelectList(ViewBag.ZoneList, "value", "text"), "----------Select Zone-----------",new { @id="zonesat"})
            @Html.ValidationMessageFor(model => model.SaturdayZone)
        </div>

        <div class="editor-label">
        <p style="float:right" > </p>
            @Html.Label("Sunday Zone")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.SundayZone, new SelectList(ViewBag.ZoneList, "value", "text"), "----------Select Zone-----------", new { @id="zonesun"})
            @Html.ValidationMessageFor(model => model.SundayZone)
        </div>
        </fieldset>
        <p>
            <input type="submit" value="Assign" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
    $('#Country').change(function () {
        var selectedCountry = $(this).val();
        clearCity();
        clearArea();
        clearZone();
        if (selectedCountry != null && selectedCountry != '') {
            $.getJSON('@Url.Action("Cities")', { countyId: selectedCountry }, function (cities) {
                var citySelect = $('#City');
                $.each(cities, function (index, city) {
                    citySelect.append($('<option/>', {
                        value: city.Value,
                        text: city.Text
                    }));
                });
            });
        }
    });

    function clearCity() {
        var citySelect = $('#City');
        citySelect.empty();
        citySelect.append($('<option/>', {
            value: "",
            text: "-------------Select City-------"
        }));
    }
    function clearArea() {
        var select = $('#Area');
        select.empty();
        select.append($('<option/>', {
            value: "",
            text: "-------------Select Area-------"
        }));
    }
    function clearZone() {
        var zone1Select = $('#zonemon');
        var zone2Select = $('#zonetue');
        var zone3Select = $('#zonewed');
        var zone4Select = $('#zonethus');
        var zone5Select = $('#zonefri');
        var zone6Select = $('#zonesat');
        var zone7Select = $('#zonesun');
        zone1Select.empty();
        zone1Select.append($('<option/>', { value: "", text: "-------------Select Zone-------" }));
        zone2Select.empty();
        zone2Select.append($('<option/>', { value: "", text: "-------------Select Zone-------" }));
        zone3Select.empty();
        zone3Select.append($('<option/>', { value: "", text: "-------------Select Zone-------" }));
        zone4Select.empty();
        zone4Select.append($('<option/>', { value: "", text: "-------------Select Zone-------" }));
        zone5Select.empty();
        zone5Select.append($('<option/>', { value: "", text: "-------------Select Zone-------" }));
        zone6Select.empty();
        zone6Select.append($('<option/>', { value: "", text: "-------------Select Zone-------" }));
        zone7Select.empty();
        zone7Select.append($('<option/>', { value: "", text: "-------------Select Zone-------" }));
    }
    $('#City').change(function () {
        var selectedCity = $(this).val();
        clearArea();
        clearZone();
        if (selectedCity != null && selectedCity != '') {
            $.getJSON('@Url.Action("Areas")', { cityId: selectedCity }, function (areas) {
                var areaSelect = $('#Area');
                $.each(areas, function (index, area) {
                    areaSelect.append($('<option/>', {
                        value: area.Value,
                        text: area.Text
                    }));
                });
            });
        }
    });
    $('#Area').change(function () {
        var selectedArea = $(this).val();
        clearZone();
        if (selectedArea != null && selectedArea != '') {
            $.getJSON('@Url.Action("Zones")', { areaId: selectedArea }, function (zones) {
                var zone1Select = $('#zonemon');
                var zone2Select = $('#zonetue');
                var zone3Select = $('#zonewed');
                var zone4Select = $('#zonethus');
                var zone5Select = $('#zonefri');
                var zone6Select = $('#zonesat');
                var zone7Select = $('#zonesun');
                $.each(zones, function (index, area) {
                    zone1Select.append($('<option/>', { value: area.Value, text: area.Text }));
                    zone2Select.append($('<option/>', { value: area.Value, text: area.Text }));
                    zone3Select.append($('<option/>', { value: area.Value, text: area.Text }));
                    zone4Select.append($('<option/>', { value: area.Value, text: area.Text }));
                    zone5Select.append($('<option/>', { value: area.Value, text: area.Text }));
                    zone6Select.append($('<option/>', { value: area.Value, text: area.Text }));
                    zone7Select.append($('<option/>', { value: area.Value, text: area.Text }));
                });
            });
        }
    });
</script>